<template>
	<PageLayout :title="projectStore.project.name">
		<view class="contanier">
			<view class="content">
				<block v-if="tabIdx==0">
					<PayListBox ref="payListBoxRef"  />
				</block>
				<block v-if="tabIdx==1">
					<ChatRoomBox ref="chatRoomBoxBoxRef" />
				</block>
				<block v-if="tabIdx==2">
					<ProjectSettingBox ref="projectSettingBoxRef" />
				</block>
			</view>
			
			<view class="bottom-menu">
				<up-tabbar
					:value="tabIdx"
					:placeholder="false"
					@change="handlerTabChange"
					:fixed="false"
					:safeAreaInsetBottom="true"
					activeColor="#f8744d"
				>
					<up-tabbar-item text="消费" icon="rmb-circle" dot ></up-tabbar-item>
					<up-tabbar-item text="群聊" icon="chat" badge="3"></up-tabbar-item>
					<up-tabbar-item text="设置" icon="setting" ></up-tabbar-item>
				</up-tabbar>
			</view>
		</view>
	</PageLayout>
</template>

<script setup>
	import PageLayout from '../../components/myLayout/PageLayout.vue';
	import {ref} from "vue"
	import PayListBox from './components/PayListBox.vue';
	import ChatRoomBox from './components/ChatRoomBox.vue';
	import ProjectSettingBox from './components/ProjectSettingBox.vue';
	import {onLoad,onBackPress,onUnload} from "@dcloudio/uni-app"
	import { useProjectStore } from '../../store/projectStore';
	import { ProjectGetReq } from '../../http/project';

	const projectStore=useProjectStore()

	const title=ref(projectStore.project.name)
	
	const tabIdx=ref(0)

	
	
	const payListBoxRef=ref(null)

	const chatRoomBoxBoxRef=ref(null)

	const projectSettingBoxRef=ref(null)

	const handlerTabChange=(e)=>{
		tabIdx.value=e
	}
	
	onLoad(async (options)=>{
		if(!options.id || options.id<=0) return;
		const res=await ProjectGetReq({id:options.id})
		await projectStore.setProject(res.data)
	})
	
	onUnload(()=>{
		projectStore.clearProject()
	})
	
	onBackPress((e)=>{
		console.log(e)
	})

</script>

<style lang="scss" scoped>

	.contanier{
		display: flex;
		flex-direction: column;
		align-items: stretch;
		height: 100%;
		.content{
			position: relative;
			height: 100%;
			overflow: hidden;
		}
		.bottom-menu{
			// position: absolute;
			// bottom: 0;
			width: 100%;
		}
	}

</style>
